<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-date"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
          <el-dialog title="审核" :visible.sync="dialogFormReview">
            <el-form :rules="rules" :model="addForm" ref="addForm">
              <el-form-item label="审核" :label-width="formLabelWidth" prop="review">
                  <el-select v-model="addForm.review" placeholder="请选择">
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormReview = false">取 消</el-button>
                <el-button type="primary" @click="reviewSucc">确 定</el-button>
            </div>
          </el-dialog>
          <el-input placeholder="输入标题" class="search" v-model="searchKey"></el-input>
          <el-button type="primary" icon="search" @click="search">搜索</el-button>
        </div>
        <div>
          <el-table :data="dataSource" border fit style="width: 100%">
              <el-table-column prop="content" label="内容" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="decisionId" label="决策调研" show-overflow-tooltip :formatter="deFor">
              </el-table-column>
              <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                      <el-button type="text" size="small" @click="onReview(scope.row)">审核</el-button>
                      <!-- <el-button type="text" size="small" @click="detail(scope.row)">查看</el-button> -->
                      <!-- </el-switch> -->
                  </template>
              </el-table-column>
          </el-table>
        </div>
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page="page.number" 
            layout="total, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { decision } from "../../server/getDate.js";
import { mapState, mapActions } from 'vuex'
const { listApi, commentListApi, commentDisableApi } = decision
export default {
    data() {
        return {
            dialogFormReview: false,
            title: '',
            addForm: {},
            formLabelWidth: '120px',
            searchKey: '',
            options: [{
                value: '0',
                label: '不通过'
            }, {
                value: '1',
                label: '通过'
            }],
            rules: {
                review: [{ required: true, message: '请选中内容', trigger: 'blur' }],
            },
        }
    },
    created() {
        this.allType(1)
        this.getList()
    },
    computed: mapState({
        dataSource: state => state.Decision.commentList,
        page: state => state.Decision.commentPage,
        list: state => state.Decision.list
    }),
    methods: {
        ...mapActions(['saveComment', 'saveList']),
        getList() {
            const params = {
                page: 1,
                pageSize: 9999
            }
            listApi({ ...params }).then(res => {
                if (res.code === '000000') {
                    this.saveList(res)
                } else {
                    this.$message.error(res.message)
                }
            }, () => {
                this.$message.error('网络错误')
            })
        },
        allType(number) {
            const params = {
                page: number,
                pageSize: 10
            }
            if (this.searchKey !== '') {
                params.searchKey = this.searchKey
            }
            commentListApi({ ...params }).then(res => {
                if (res.code === '000000') {
                    this.saveComment({
                        ...res,
                        number
                    })
                } else {
                    this.$message.error(res.message)
                }
            }, err => this.$message.error(err.message) )
        },
        search() {
            this.allType(this.page.number)
        },
        onReview(row) {
          this.dialogFormReview = true
          this.addForm = row
        },
        handleCurrentChange(val) {
            this.allType(val)
        },
        deFor(row) {
            console.log(row.decisionId)
            if (!row.decisionId) {
                return '无'
            }
            let type = ''
            this.list.some(item => {
                if (row.decisionId === item.id) {
                    type = item.title
                    return true
                }
            })
            return type
        },
        reviewSucc() {
            this.$refs['addForm'].validate(valid => {
                if (valid) {
                    this.dialogFormReview = false
                    commentDisableApi({
                        ids: this.addForm.id, 
                        state: this.addForm.review
                        }).then(res => {
                            if (res.code === '000000') {
                                this.$message.success('操作成功')
                                this.allType(this.page.number)
                            } else {
                                this.$message.error(res.message)
                            }
                        }, () => {
                            this.$message.error('网络错误')
                        })
                }
            })  
        }
    }
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
</style>
